<template>
    <view class="classify">
        <!-- 左侧标签区域 -->
        <scroll-view class="left" scroll-y>
            <!-- 定义一个acitves为0，与index的索引绑定,若相等赋予类名，不相等为空 -->
            <view :class="actives === index ? 'active' : ''" v-for="(item, index) in cates" :key="item.id" @click="leftClickHandle(index, item.id)">{{ item.title }}</view>
        </scroll-view>
        <!-- 右侧图片区域 -->
        <scroll-view class="right" scroll-y>
            <view class="item" v-for="item in secondData" :key="item.id" 　@click="link(item.id)">
                <!-- @click.stop="previewImg(item.img_url)" -->
                <image :src="item.img_url"></image>
                <text>{{ item.title }}</text>
            </view>
            <text class="none" v-if="secondData.length === 0">暂无数据</text>
        </scroll-view>
    </view>
</template>

<script>
import myServer from '@/plugins/http/server/my';
export default {
    data() {
        return {
            // 左侧页面数据
            cates: [],
            // 设置高亮标签
            actives: 0,
            // 右侧图片数据
            secondData: []
        };
    },
    onShow() {
        this.getPicsCate();
    },
    methods: {
        link(id) {
            uni.navigateTo({
                url: `/pages/article/index?id=${id}`
            });
        },
        // 发送请求获取左侧页面数据
        async getPicsCate() {
            myServer
                .miniTypeAll({ pageNo: 1, pageSize: 999 })
                .then(({ data }) => {
                    this.cates = data.datas.map(d => ({
                        title: d.value,
                        id: d.id
                    }));
					if(this.cates.length){
						this.leftClickHandle(0, this.cates[0].id);
					}
                })
                .catch(e => {
                    console.log(e);
                });
        },
        // 点击时获取标签索引用于高亮显示及id用于获取右侧图片数据
        async leftClickHandle(index, id) {
            this.actives = index;
            myServer
                .miniProductAll({ typeId: id, pageNo: 1, pageSize: 9999 })
                .then(({ data }) => {
                    this.secondData = data.datas.map(d => ({
                        title: d.title,
                        img_url: d.src,
                        id: d.id
                    }));
                })
                .catch(e => {
                    console.log(e);
                });
        }
    }
};
</script>

<style lang="less" scoped>
@import 'index';
</style>
